<template>
  <el-calendar v-model="calendarDate">
    <template #date-cell="{ data }">
      <div>
        <p>{{ data.day.split("-").slice(1).join("-") }}</p>
        <div v-if="dataBase.mealCounts[data.day] !== undefined">
          <span class="meal-count"
            >{{ dataBase.mealCounts[data.day] }}人已报餐</span
          >
        </div>
      </div>
    </template>
  </el-calendar>
</template>
<script setup>
import { ref, reactive } from "vue";
// 日历
const calendarDate = ref(new Date());
const dataBase = reactive({
  mealCounts: {
    // 示例数据，实际应用中应从后端获取
    "2024-07-01": 25,
    "2024-07-02": 30,
  },
});
// const formatDate = (date) => {
//   console.log(date);
//   // const year = date.getFullYear();
//   // const month = ("0" + (date.getMonth() + 1)).slice(-2);
//   // const day = ("0" + date.getDate()).slice(-2);
//   // return `${year}-${month}-${day}`;
// };
// const calendarData = ref({});
// const handleChange = () => {
//   // 格式化日期
//   const formattedCalendarData = Object.keys(calendarData.value).reduce(
//     (acc, date) => {
//       const d = new Date(date);
//       const year = d.getFullYear();
//       const month = ("0" + (d.getMonth() + 1)).slice(-2);
//       const day = ("0" + d.getDate()).slice(-2);
//       const formattedDate = `${year}-${month}-${day}`;
//       acc[formattedDate] = calendarData.value[date];
//       return acc;
//     },
//     {}
//   );
//   console.log("格式化后的值", formattedCalendarData);
// };
</script>
<style lang="less" scoped>
.meal-count {
  color: #296dff;
  font-weight: bold;
}
</style>

